<template>
  <el-dialog
    :title="title"
    :visible.sync="openSheet"
    width="800px"
    :destroy-on-close="true"
    :close-on-click-modal="false"
  >
    <el-row :gutter="20">
      <el-col :span="8">
        <div>
          <el-input
            v-model="menuName"
            :placeholder="$t('inputMenuName')"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div>
          <el-tree
            ref="tree"
            :data="menuList"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <el-col :span="16">
        <div style="margin-bottom: 20px">
          <el-button size="small" plain @click="updateMenuSensitiveFieldBatchAuthorize('N')">{{ $t('noAccessAll') }}</el-button>
          <el-button size="small" plain @click="updateMenuSensitiveFieldBatchAuthorize('R')">{{ $t('readonlyAll') }}</el-button>
          <el-button size="small" plain @click="updateMenuSensitiveFieldBatchAuthorize('W')">{{ $t('readWriteAll') }}</el-button>
        </div>
        <div>
          <el-card v-show="showCard">
            <div slot="header"><el-tag effect="plain">{{ currentMenuName }}</el-tag></div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <table cellspacing="0" style="width: 100%">
                <tbody>
                  <tr>
                    <td class="el-table__cell is-leaf"><div class="cell">{{ $t('price') }}</div></td>
                    <td class="el-table__cell">
                      <div class="cell">
                        <el-radio-group v-model="price" @change="handleChange($event, 'PRICE')">
                          <el-radio label="N">{{ $t('noAccess') }}</el-radio>
                          <el-radio label="R">{{ $t('readonly') }}</el-radio>
                          <el-radio label="W">{{ $t('readWrite') }}</el-radio>
                        </el-radio-group>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="el-table__cell is-leaf"><div class="cell">{{ $t('amount') }}</div></td>
                    <td class="el-table__cell is-leaf">
                      <div class="cell">
                        <el-radio-group v-model="amount" @change="handleChange($event, 'AMOUNT')">
                          <el-radio label="N">{{ $t('noAccess') }}</el-radio>
                          <el-radio label="R">{{ $t('readonly') }}</el-radio>
                          <el-radio label="W">{{ $t('readWrite') }}</el-radio>
                        </el-radio-group>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="el-table__cell is-leaf"><div class="cell">{{ $t('currency') }}</div></td>
                    <td class="el-table__cell is-leaf">
                      <div class="cell">
                        <el-radio-group v-model="currency" @change="handleChange($event, 'CURRENCY')">
                          <el-radio label="N">{{ $t('noAccess') }}</el-radio>
                          <el-radio label="R">{{ $t('readonly') }}</el-radio>
                          <el-radio label="W">{{ $t('readWrite') }}</el-radio>
                        </el-radio-group>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t('cancel') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getMenuSensitiveFieldAuthorizeApi, getMenuStructureTreeApi, updateMenuSensitiveFieldAuthorizeApi, updateMenuSensitiveFieldBatchAuthorizeApi } from './../api/rbac.api'
export default {
  name: 'UserSensitiveFieldAuthorize',
  data() {
    return {
      title: undefined,
      openSheet: false,
      price: undefined,
      amount: undefined,
      currency: undefined,
      currentMenuName: undefined,
      menuName: undefined,
      menuId: undefined,
      userId: undefined,
      showCard: false,
      menuList: [],
      defaultProps: {
        children: 'children',
        label: 'label',
        id: 'id'
      }
    };
  },
  watch: {
    menuName(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
  },
  methods: {
    async openSheetDialog(id) {
      this.openSheet = !this.openSheet;
      this.userId = id
      this.showCard = false
      this.menuId = undefined
      this.title = this.$t('dataAccessAuthorize')
      await this.getMenuTreeData()
    },
    cancel() {
      this.openSheet = !this.openSheet;
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    async getMenuTreeData() {
      var resp = await getMenuStructureTreeApi()
      if (resp.success) {
        this.menuList = resp.data
      } else {
        this.targaMessageBox(this.title, resp.msg);
      }
    },
    handleChange(permissionType, sensitiveField) {
      this.updateMenuSensitiveFieldAuthorize(permissionType, sensitiveField)
    },
    async updateMenuSensitiveFieldAuthorize(permissionType, sensitiveField) {
      var data = { 'menu_id': this.menuId, 'user_id': this.userId, 'permission_type': permissionType, 'sensitive_field': sensitiveField }
      var resp = await updateMenuSensitiveFieldAuthorizeApi(data)
      if (resp.success) {
        this.targaMessage(this.$t('executeSuccess'));
      } else {
        this.targaMessageBox(this.title, resp.msg);
      }
    },
    async updateMenuSensitiveFieldBatchAuthorize(permissionType) {
      const confirmOptions = {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        cancelButtonClass: 'btn-cancel-to-right',
        type: 'warning'
      };

      try {
        await this.$confirm(this.$t('executeConfirm'), this.$t('warning'), confirmOptions);
        var data = { 'user_id': this.userId, 'permission_type': permissionType }
        var resp = await updateMenuSensitiveFieldBatchAuthorizeApi(data)
        if (resp.success) {
          this.targaMessage(this.$t('executeSuccess'));
          if (this.showCard) {
            this.getMenuSensitiveFieldAuthorize()
          }
        } else {
          this.targaMessageBox(this, resp.msg);
        }
      } catch (err) {
        console.error(err);
      }
    },
    async getMenuSensitiveFieldAuthorize() {
      var resp = await getMenuSensitiveFieldAuthorizeApi({ 'menu_id': this.menuId, 'user_id': this.userId })
      if (resp.success) {
        this.price = resp.data['price']
        this.amount = resp.data['amount']
        this.currency = resp.data['currency']
      } else {
        this.targaMessageBox(this.title, resp.msg);
      }
    },
    // 节点单击事件
    async handleNodeClick(data) {
      this.currentMenuName = data.label
      const keys = Object.keys(data);
      if (!keys.includes('children')) {
        this.showCard = true
        this.menuId = data.id
        await this.getMenuSensitiveFieldAuthorize()
      } else {
        this.showCard = false
      }
    }
  }
};
</script>

<style scoped>
.nested {
  margin-left: 20px; /* 根据需要调整缩进 */
}
</style>
